<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { Edit } from '@element-plus/icons-vue'
import { bucketGetSummaryService, bucketsUpdateService } from '@/api/buckets'

const route = useRoute()

// 接收传递参数
const name = route.query.name

// 获取 bucket 的 summary数据
const summaryData = ref({})

const getSummaryData = async () => {
  const res = await bucketGetSummaryService(name)
  const data = res.data.data

  // 策略整数值转成对应字符串
  const accessPolicyIntValue = data['accessPolicy']
  if (accessPolicyIntValue === 0) {
    data['accessPolicy'] = '公共'
  } else {
    data['accessPolicy'] = '私有'
  }

  summaryData.value = data
}
getSummaryData()

// 修改策略
const isShowAccessPolicyDialog = ref(false)

const accessPolicyRef = ref('')

const options = [
  {
    value: 0,
    label: '公共',
  },
  {
    value: 1,
    label: '私有',
  },
]

const onChangeAccessPolicy = async () => {
  const accessPolicy = accessPolicyRef.value
  await bucketsUpdateService({ name, accessPolicy})
  isShowAccessPolicyDialog.value = false
  getSummaryData()
}


</script>

<template>
  <el-descriptions title="总结" size="large">
    <el-descriptions-item label="访问策略:">
      <span style="color: blue;">{{ summaryData['accessPolicy'] || '无' }}</span>
      <el-icon @click="isShowAccessPolicyDialog = true" style="cursor: pointer; padding: 2px">
        <Edit />
      </el-icon>
    </el-descriptions-item>
    <el-descriptions-item label="加密:">
      <span style="color: blue;">{{ summaryData[''] || '无' }}</span>
      <el-icon style="cursor: pointer; padding: 2px">
        <Edit />
      </el-icon>
    </el-descriptions-item>
  </el-descriptions>
  <el-dialog style="font-weight: bold;" width="25%" v-model="isShowAccessPolicyDialog" title="修改桶策略">
    <el-form ref="form" :model="passwordModel" :rules="rules" label-width="auto" @submit.prevent>
      <div style="display: flex; align-items: center; padding: 10px;">
        <span style="margin-right: 8px;">访问策略</span>
        <el-select v-model="accessPolicyRef" placeholder="" style="flex: 1">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button color="black" @click="isShowAccessPolicyDialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="onChangeAccessPolicy">
          设置
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="sass" scoped>
</style>